<template>
        <!-- <view class="iptWrap">
            <view class="iptTitle">请输入您的姓名</view>
            <input class="iptSyl" placeholder="请输入姓名" v-model="name" />
            <view class="btnWrap">
                <view class="btn" @tap="clearIpt">清空</view>
                <view class="btn" @tap="startText" style="background-color: #FF7F22; color: #fff;">开始测字</view>
            </view>
        </view>
        <view class="glyphomancying" :style="{ display: ing ? 'block':'none' }">
            <image src="../../../static/name/glyphomancy.svg" />
            <view class="text">测字中，请稍后...</view>
        </view>
        <view class="glyphomancyRes" :style="{ display: result ? 'block':'none' }">
            <view class="warn">注：本测字结果仅供参考，具体结论请以实际情况为准。</view>
            <view class="content">
                <view class="iptName">您输入的姓名：<view class="name">{{ name }}</view> 占得第{{ count }}签</view>
            </view>
            <view class="content">
                <view class="resultSyl">测字结果</view>
                <view class="line"></view>
                <view class="resDetailsWrap">
                    <view class="resWrap">
                        <view class="res" v-for="(item,idx) in resArrLeft" :key="idx">
                            <view class="name">{{ item.name }}：</view>
                            <view  v-for="(child,index) in item.context" :key="index" >
                                <view class="details" :style="{  background: child == '火' ? '#FFE9F1': child=='金' ? '#F9F4E5': child == '木' ? '#E5F9F6': child == '水' ? '#E5F3FF': child == '土' ? '#F3EDEA' : '#FFF2E8',color: child == '火' ? '#FF2C7C': child=='金' ? '#C99900': child == '木' ? '#03C8AA': child == '水' ? '#008AFF': child == '土' ? '#8B5335' : '#FF7F22' }">{{ child }}</view>
                            </view>
                        </view>
                    </view>
                    <view class="resWrap">
                        <view class="res" v-for="(item,idx) in resArrRight" :key="idx">
                            <view class="name">{{ item.name }}：</view>
                            <view  v-for="(child,index) in item.context" :key="index" >
                                <view class="details"  :style="{  background: child == '火' ? '#FFE9F1': child=='金' ? '#F9F4E5': child == '木' ? '#E5F9F6': child == '水' ? '#E5F3FF': child == '土' ? '#F3EDEA' : '#FFF2E8',color: child == '火' ? '#FF2C7C': child=='金' ? '#C99900': child == '木' ? '#03C8AA': child == '水' ? '#008AFF': child == '土' ? '#8B5335' : '#FF7F22' }">{{ child }}</view>
                            </view>
                        </view>
                    </view> 
                </view>
            </view>
            <view class="content">
                <view class="resultSyl">测字解析</view>
                <view class="line"></view>
                <view class="analysis" v-for="(item,idx) in glyphomancyArr" :key="idx">
                    <view class="bg">
                        <view class="analysisTitle">{{ item.name }}</view>
                        <view class="analysisTitleDetails">{{ item.analysis }}</view>
                    </view>
                    <view class="what">{{ item.explain == null? '':item.explain }}</view>
                    <view class="whatDetails">{{ item.answer == null ? '':item.answer }}</view>
                    <view class="from">{{ item.riddle == null ? '':item.riddle }}</view>
                </view>
            </view>
        </view> -->
        
		<view class="wrap">
			<view :style="{ height: `${statusBarHeight}px` }"></view>
			    <!-- 自定义导航栏高度 并 居中 -->
			<view :style="{
			  height: `${barHeight}px`,
			  'line-height': `${barHeight}px`,
			  'text-align': 'center',
			}">
				<text>他说</text>
			</view>
			<view class="searchImgWrap">
				<view v-if="showInfo" class="searchLeft"></view>
				<view class="searchRight"></view>
			</view>
		     <view class="contentWrap">
				 <view class="avatarWrap" style="display: flex;justify-content: space-around;">
					 <view class="AvatarWrap">
					 	<image :src="getImgUrl('/img/name/women.png')" @click="changeSex(2)" class="avatar" />
					 	<view class="choose"><uni-data-checkbox selectedColor="#FF7F22" v-model="sexVls" :localdata="womenRange"></uni-data-checkbox></view>
						<view class="sex" :style="{color: sexVls == 2 ? '#FF7F22;':'#000'}">女生</view>
					 </view>
					<view class="AvatarWrap">
						<image :src="getImgUrl('/img/name/man.png')" @click="changeSex(1)" 
							class="avatar" />
						<view class="choose"><uni-data-checkbox selectedColor="#FF7F22" v-model="sexVls" :localdata="manRange"></uni-data-checkbox></view>
						<view class="sex" :style="{color: sexVls == 1 ? '#FF7F22;':'#000'}">男生</view>
					</view>
				 </view>
				 <view class="iptWrap">
					 <view class="name">姓名</view>
					 <input class="iptSyl" placeholder="请输入姓名" v-model="name" />
				 </view>
				 <view v-if="showInfo" class="btn" @tap="startText" >开始测字</view>
		     </view>
		</view>
</template>
<script>
import { glyphomancyAPI, addGlyphomancyPI } from '../../../utils/api'
import { getImgUrl } from '../../../utils/common'
import { showInfoFunc } from '../../../utils/common'
export default {
  
   data() {
     return {
		showInfo: false,
		statusBarHeight:'',
		barHeight:'',
		name:'',
		sexVls:2,
		womenRange: [{"value": 2,"text": ""	}],
		manRange:[{"value": 1,"text": ""	}],
        // ing: false,
        // result: false,
        // info:{},
        // count:12,
        // glyphomancyArr:[
        //     {
        //         name:'天格的解析',
        //         title:'天格数是先祖留传下来的，其数理对人影响不',
        //         what:'什么是天格',
        //         details:'天格是由您的姓决定的，姓是祖业流传下来的。它的数理对人生并无直接的影响。所以，天格的吉凶数理不用重视。在测名字的时候，也会有天格的数理吉凶解释，那是对这个数字的解释，本身无太大意义。',
        //         from:'12（掘井无泉）无理之数，发展菠弱，虽生不足，难酬志向。'
        //     }
        // ],
        // resArrLeft:[],
        // resArrRight:[]
     }
   },
   onLoad(){
	this.showInfo = showInfoFunc('测字') == undefined ? false : true
   },
   mounted() {
   	// 状态栏高度
   	this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight; 
   	// 胶囊数据
   	const { top, height } = wx.getMenuButtonBoundingClientRect();
   	// 自定义导航栏高度 = 胶囊高度 + 胶囊的padding*2, 如果获取不到设置为38
   	this.barHeight = height ? height + (top - this.statusBarHeight) * 2 : 38;
   },
   methods: {
	getImgUrl,
	// 获取性别
	changeSex(sex){
		this.sexVls = sex
	},
    // 开始测字
    async startText(){
		console.log('测字选择=======>',this.sexVls)
        if(this.name == ''){
			uni.showToast({
				icon:'error',
				title:'请输入名字'
			})

        }else{
			// 
			uni.navigateTo({
				url:`../../../subPackagesA/pages/glyphomancyDetail/glyphomancyDetail?name=${this.name}&sexVls=${this.sexVls}`,
			})
            // this.ing = true;
            // this.result = false;
   //          const res = await glyphomancyAPI(this.name);
			// if(JSON.stringify(res.result) == "{}"){
			// 	Toast('暂无查询结果')
			// 	this.ing = false;
			// }else{
			// 	this.count = res.result.count;
			// 	if(res.code == 200){
			// 	    this.glyphomancyArr = res.result.listAnalysis;
			// 	    this.resArrLeft = res.result.GlyphomancyResult.slice(0,4);
			// 	    this.resArrRight = res.result.GlyphomancyResult.slice(4);
			// 	    const params = {
			// 	        name: this.name,
			// 	        context: JSON.stringify(res.result)
			// 	    }
			// 		this.ing = false;
			// 		this.result = true;
			// 	    const result = await addGlyphomancyPI(params)
					
			// 	}
			// }
			
			
            
        }
    },
    // 清空名字
    // clearIpt(){
    //     this.name = ''
    //     this.ing = false;
    //     this.result = false;
    // },
    // // 获取输入的名字
    // getIpt(e){
	// 	console.log('我执行了么？========》',e)
    //     this.name = e.detail.value;
	// 	console.log('name=========>',this.name)
    // },
   }
};
</script>
<style lang='less' scoped>
	.btn{
		margin-top: 40rpx;
		width: 622rpx;
		height: 88rpx;
		line-height: 88rpx;
		background: #FF7F22;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		color: #fff;
		text-align: center;
	}
	.iptWrap{
		margin-top: 80rpx;
		display: flex;
		align-items: center;
		width: 622rpx;
		height: 104rpx;
		border-radius: 98rpx 98rpx 98rpx 98rpx;
		opacity: 1;
		border: 2rpx solid #F0F0F0;
		.name{
			margin: 0 20rpx 0 40rpx;
		}
	}
	.AvatarWrap{
		position: relative;
	}
	.avatar{
		width: 120rpx;
		height: 120rpx;
	}
	
	.sex{
		position: absolute;
		left: 30rpx;
	}
	.choose{
		position: absolute;
		bottom: 6rpx;
		left: 90rpx;
	}
	
	/* -----------------------外部背景，内容框-------------------------------- */
	
	.contentWrap{
		position: relative;
		margin: -80rpx 30rpx 30rpx 30rpx;
		width: 630rpx;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 16rpx;
		z-index: 9999;
	}
	.searchImgWrap{
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 30rpx;
	}
	.searchLeft{
		width: 280rpx;
		height: 86rpx;
		background: url('https://ctrlsoft.net.cn/app_static/hesaid/img/name/onlineWord.png') no-repeat;
		background-size: 100% 100%;
	}
	.searchRight{
		width: 248rpx;
		height: 248rpx;
		background: url('https://ctrlsoft.net.cn/app_static/hesaid/img/name/write.png') no-repeat;
		background-size: 100% 100%;
	}
	.dream{
		background-color: #fff;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
	}
	 .wrap{
		width: 100%;
		background: url('https://ctrlsoft.net.cn/app_static/hesaid/img/oneiromancy/background.png') no-repeat;
		background-size: 100% 100%;
	}
		 
</style>